<template>
    <transition-group name="taglist-moving-animation">
        <el-tag type="dot" v-for="(item, index) in pageOpenedList" ref="tagsPageOpened" closable size="medium "
                :key="item"
                @close="handleClose(item)"
                :color="color(item)"
                :closable="pageOpenedList.length > 1"
                @click.native="linkTo(item)">
            {{ $t('common.'+item.substring(1))}}
        </el-tag>
    </transition-group>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'

    export default {
        name: "homeTag",
        data() {
            return {

            }
        },
        methods: {
            ...mapMutations(["delOpenPage"]),
            linkTo(path) {
                if(path==='/productAddAdvertising'){
                    this.$router.push({path: path, query: {id: this.$store.state.adEditId,copy: this.$store.state.adCopy,domain: this.$store.state.saveDomain,}})
                }else{
                    this.$router.push({path: path})
                }
            },
            handleClose(page) {
                let index = this.pageOpenedList.indexOf(page);
                this.delOpenPage(page)
                if(page === this.currentPage){
                    let path = index < this.pageOpenedList.length ? this.pageOpenedList[index]:this.pageOpenedList[index -1]
                    this.$router.push(path)
                }

            },
            color(page) {
                return this.currentPage === page ? '#409eff1a' : "#fff"
            }
        },
        computed: {
            ...mapState([
                'currentPage', 'pageOpenedList','cachePage'
            ]),
        }
    }
</script>

<style scoped>

</style>